<template>
  <div class="content">
      <card title="评论管理" size="large">
          <el-button plain :icon="RefreshRight" size="default" @click="reset()">重置</el-button>
          <template #main>
              <el-row>
                  <el-col :span="8">
                      <div class="form-item">
                          <span>聊天内容</span>
                          <el-input 
                              v-model.trim="queryData.content" 
                              placeholder="请输入聊天记录内容"
                              clearable
                              @keyup.enter.native="search()"
                              @change="search()">
                          </el-input>
                      </div>
                  </el-col>
                  <el-col :span="8">
                      <div class="form-item">
                          <span>用户名</span>
                          <el-input 
                              v-model.trim="queryData.nickname" 
                              placeholder="请输入用户名"
                              clearable
                              @keyup.enter.native="search()"
                              @change="search()">
                          </el-input>
                      </div>
                  </el-col>
                  <el-col :span="8">
                      <div class="btn-item">
                          <el-button 
                              type="primary" 
                              size="default" 
                              plain 
                              :icon="Search" 
                              @click="search()">
                              搜索
                          </el-button>
                      </div>
                  </el-col>
              </el-row>
          </template>
      </card>
      <div class="card-content">
          <div class="oper-box">
              <el-button type="primary" plain :icon="Delete" @click="handleBatchDelete" v-show="globalStore.deleteAuthority">批量删除</el-button>
          </div>
          <el-table
              :data="tableData"
              ref="multipleTableRef"
              v-loading="loading"
              row-key="id"
              size="default"
              empty-text="暂无数据"
              highlight-current-row
              class="primary-table label-table"
              @selection-change="handleSelect"
              @select-all="handleSelectAll">
              <el-table-column type="selection" width="55" align="center" fixed="left" />
              <el-table-column prop="content" label="聊天记录内容" min-width="120" show-overflow-tooltip fixed="left"></el-table-column>
              <el-table-column prop="user1.nickname" label="用户1" min-width="80" show-overflow-tooltip></el-table-column>
              <el-table-column prop="user2.nickname" label="用户2" min-width="80" show-overflow-tooltip></el-table-column>
              <el-table-column prop="create_time" label="创建时间" min-width="170" show-overflow-tooltip sortable></el-table-column>
              <el-table-column label="操作" align="center" width="100" fixed="right">
                  <template #default="scope">
                      <el-tooltip content="详情" placement="top">
                          <el-button 
                              link 
                              type="primary" 
                              :icon="View" 
                              @click="handleDetail(scope.$index, scope.row)">
                          </el-button>
                      </el-tooltip>
                      <el-tooltip content="删除" placement="top">
                          <el-button 
                              link 
                              type="primary" 
                              :icon="Delete" 
                              @click="handleDelete(scope.$index, scope.row)"
                              v-show="globalStore.deleteAuthority">
                          </el-button>
                      </el-tooltip>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination v-model:page-size="queryData.pageSize" :current-page="queryData.pageNum" background
                layout="total, prev, pager, next" :total="total" :page-sizes="[10, 20, 50, 80, 100]"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
      </div>
  </div>
  <el-dialog
      v-if="dialogDetail"
      v-model="dialogDetail"
      title="聊天记录详情"
      class="log-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
      @befor-close="handleClose">
      <comment-details :id="currentRow.chat_id || ''"></comment-details>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { getChatsBySearch,deleteChatById,deleteChatAmount } from '../../api/chat'
import { Delete, View, Search, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import card from '../../components/card/index.vue'
import commentDetails from './components/commentDetails.vue'
import useGlobalStore from '../../store/modules/global';

const globalStore = useGlobalStore()

const queryData = ref({
  nickname: '',
  content: '',
  pageSize: 10,
  pageNum: 1,
  sortFieldName:'create_time',
  sortOrder:'DESC'
})

const total = ref(0)
const loading = ref(false)
const multipleSelection:any = ref([])
const dialogDetail = ref(false)
const currentRow:any = ref({})
const currentIndex = ref(0)


//表格部分
const tableData = ref([])

// 查看详情
const handleDetail = (index: any, row: Object) => {
  currentRow.value = row
  currentIndex.value = index
  dialogDetail.value = true
}
const handleClose = () => {
  currentRow.value = {}
  currentIndex.value = 0
  dialogDetail.value = false
}
// 删除 
const handleDelete = (index: any, row: any) => {
  console.log('index: ', index);
  ElMessageBox.confirm('确认删除该条评论？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async() => {
      // 调删除接口
      const result = await deleteChatById({
        chat_id:row.chat_id
      })
      //@ts-ignore
      if(result.code == 1){
        ElMessage({
          type: 'success',
          message: '删除成功',
          showClose: true
        })
        search()
      }
  }).catch(() => {
      ElMessage({
          type: 'info',
          message: '已取消删除！',
          showClose: true
      })
  })
}
// 批量删除
const handleBatchDelete = () => {
  if (!multipleSelection.value.length) {
      ElMessage({
          type: 'warning',
          message: '请先选择评论！',
          showClose: true
      })
      return
  }
  ElMessageBox.confirm('确认删除选中的评论？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async() => {
      // 调批量删除接口
      const result = await deleteChatAmount({
        chats:multipleSelection.value
      })
      //@ts-ignore
      if(result.code == 1){
        ElMessage({
          type: 'success',
          message: '删除成功',
          showClose: true
        })
        search()
      }
  }).catch(() => {
      ElMessage({
          type: 'info',
          message: '已取消批量删除！',
          showClose: true
      })
  })
}
// 搜索
const search = async() => {
  // 调获取列表接口
  tableData.value = []
  const result = await getChatsBySearch(queryData.value)
  tableData.value = result.data
  //@ts-ignore
  total.value = result.total
}
// 重置
const reset = () => {
  queryData.value.nickname = ''
  queryData.value.content = ''
  queryData.value.pageNum = 1
  queryData.value.pageSize = 20
  search()
}
const handleSizeChange = (size: number) => {
  queryData.value.pageSize = size
  queryData.value.pageNum = 1
  search()
}

const handleCurrentChange = (page: number) => {
  queryData.value.pageNum = page
  search()
}


const handleSelect = (selection: Object) => {
  multipleSelection.value = selection
}
const handleSelectAll = (selection: Object) => {
  multipleSelection.value = selection
}
onMounted(() => {
    search()
})
</script> 

<style lang="less" scoped>
.label-table {
  height: calc(100% - 50px - 50px);
}
</style>
